<template>
  <div>
    <template v-for="(item, index) in growCardList" :key="item.title">
      <Card
        :style="{
          'margin-top': index === 0 ? '0px !important' : '10px !important',
          width: '100% !important',
        }"
        size="small"
        :loading="loading"
        :title="item.title"
        class="md:w-1/4 w-full !md:mt-0"
        :class="{ '!md:mr-4': index + 1 < 4, '!mt-4': index > 0 }"
      >
        <div
          class="py-4 px-4 flex justify-between items-center"
          style="padding: 0.5rem"
          v-if="index == 0"
        >
          <h2>{{ item.value }} / {{ dayNum }} / {{ Allnum }}</h2>
          <Icon :icon="item.icon" :size="40" />
        </div>
        <div
          class="py-4 px-4 flex justify-between items-center"
          style="padding: 0.5rem"
          v-if="index == 1"
        >
          <h2>{{ audioSum }} / {{ listSum }}</h2>
          <Icon :icon="item.icon" :size="40" />
        </div>
        <div
          class="py-4 px-4 flex justify-between items-center"
          style="padding: 0.5rem"
          v-if="index == 2"
        >
          <h2>{{ item.value }}</h2>
          <Icon :icon="item.icon" :size="40" />
        </div>
      </Card>
    </template>
    <Card
      :style="{
        'margin-top': '10px !important',
        width: '100% !important',
      }"
      size="small"
      :loading="loading"
      :title="t('sys.configuration.equipmentmonitoring')"
      class="md:w-1/4 w-full !md:mt-0"
    >
      <div
        class="py-4 px-4 flex justify-between items-center"
        style="padding: 0.5rem"
      >
        <VisitDevsisBar />
      </div>
    </Card>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { CountTo } from '@/components/CountTo';
  import Icon from '@/components/Icon/Icon.vue';
  import { Card } from 'ant-design-vue';
  import {
    analysisGetdataLog,
    getdataVectorizationAPI,
    getSuccessNuAPI,
    getaudioSumAPI,
  } from '@/api/demo/analysis';
  import { get } from 'sortablejs';
  import { useI18n } from '@/hooks/web/useI18n';
  import VisitDevsisBar from "@/views/dashboard/analysis/components/VisitDevsisBar.vue";

  const { t } = useI18n();
  const growCardList = ref([
    {
      title: t('sys.analysis.card1Title'),
      icon: 'visit-count|svg',
      value: 0,
      color: 'green',
      action: '月',
    },
    {
      title: t('sys.analysis.card3Title'),
      icon: 'download-count|svg',
      value: 0,
      color: 'orange',
      action: '周',
    },
  ]);

  const loading = ref(false);
  const dayNum = ref(0);
  const audioSum = ref(0);
  const SuccessNu = ref(0);
  const listSum = ref(0);
  const Allnum = ref(0);

  const fetchData = async () => {
    loading.value = true;
    try {
      const Data = await analysisGetdataLog();
      const response = Data.data;
      const today = new Date().toISOString().split('T')[0];
      const todayData = response.find((item) => item.date === today);
      const yesterdayData = response.find(
        (item) =>
          item.date ===
          new Date(new Date().setDate(new Date().getDate() - 1)).toISOString().split('T')[0],
      );
      if (todayData && yesterdayData) {
        dayNum.value = todayData.dayNum - yesterdayData.dayNum;
      }
      if (todayData) {
        growCardList.value[0].value = todayData.dayNum;
        Allnum.value = todayData.allNum;
      }
    } catch (error) {
      console.error('Failed to fetch data:', error);
    } finally {
      loading.value = false;
    }
  };

  const getlistSum = async () => {
    // const Data = await getlistSumAPI();
    const Data = await getdataVectorizationAPI();
    Data.data.forEach((ele) => {
      if (ele.label == 0) {
        audioSum.value = ele.value;
      } else {
        listSum.value = ele.value;
      }
    });
  };
  const getSuccessNu = async () => {
    const Data = await getSuccessNuAPI();
    console.log(Data, '3');
    growCardList.value[2].value = Data.data;
  };

  onMounted(() => {
    fetchData();
    getlistSum();
    getSuccessNu();
  });

  defineProps({
    loading: {
      type: Boolean,
    },
  });
</script>
